<template>
	<div class="app-container">
		<!-- 顶部导航栏 -->
		<header class="header">
			<div class="logo">
				<svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				校园运动会管理系统
			</div>
			<div class="flex-grow"></div>
			<div class="flex items-center gap-6">
				<div class="flex items-center gap-2">
					<img id="img-head" src="img/jstu1.webp" alt="用户头像">
					<span class="text-white text-sm">{{ currentUser?.realName || '管理员' }}</span>
				</div>
				<div class="flex items-center gap-2">
					<a href="javascript:void(0)" class="denglu" @click="handleLogout">
						<svg class="logout-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<polyline points="16 17 21 12 16 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						退出登录
					</a>
				</div>
			</div>
		</header>

		<!-- 左侧导航栏 -->
		<nav class="sidebar">
			<div class="menu-item" :class="{ active: $route.path === '/admin' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<rect x="3" y="3" width="7" height="7" stroke="currentColor" stroke-width="2"/>
					<rect x="14" y="3" width="7" height="7" stroke="currentColor" stroke-width="2"/>
					<rect x="14" y="14" width="7" height="7" stroke="currentColor" stroke-width="2"/>
					<rect x="3" y="14" width="7" height="7" stroke="currentColor" stroke-width="2"/>
				</svg>
				<a @click="$router.push('/admin')">系统管理</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/users' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
					<circle cx="9" cy="7" r="4"></circle>
					<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
					<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
				</svg>
				<a @click="$router.push('/admin/users')">用户管理</a>
			</div>
			<div class="menu-item active">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				操作日志
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/system-config' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<circle cx="12" cy="12" r="3"></circle>
					<path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 9.54l4.24 4.24M1.54 14.46l4.24-4.24M18.46 14.46l4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				<a @click="$router.push('/admin/system-config')">系统配置</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/backup' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<polyline points="7 10 12 15 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				<a @click="$router.push('/admin/backup')">数据备份</a>
			</div>
		</nav>

		<!-- 主要内容 -->
		<main class="content">
			<div class="main-content-header">
				<h1>操作日志管理</h1>
				<div class="header-actions">
					<el-button type="success" @click="handleExport">
						<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<polyline points="7 10 12 15 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						导出日志
					</el-button>
					<el-button type="warning" @click="handleCleanLogs">
						<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						清理日志
					</el-button>
					<el-button type="primary" @click="handleStatistics">
						<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<line x1="18" y1="20" x2="18" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<line x1="12" y1="20" x2="12" y2="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<line x1="6" y1="20" x2="6" y2="14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						统计分析
					</el-button>
				</div>
			</div>

			<!-- 统计信息卡片 -->
			<div class="statistics-cards">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-card shadow="hover" class="stat-card">
							<div class="stat-content">
								<div class="stat-icon success">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<polyline points="14 2 14 8 20 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<line x1="16" y1="13" x2="8" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<line x1="16" y1="17" x2="8" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="stat-info">
									<div class="stat-value">{{ overview.totalLogs || 0 }}</div>
									<div class="stat-label">总日志数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" class="stat-card">
							<div class="stat-content">
								<div class="stat-icon primary">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
									</svg>
								</div>
								<div class="stat-info">
									<div class="stat-value">{{ overview.todayUsers || 0 }}</div>
									<div class="stat-label">今日活跃用户</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" class="stat-card">
							<div class="stat-content">
								<div class="stat-icon warning">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<circle cx="12" cy="12" r="10"></circle>
										<line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="stat-info">
									<div class="stat-value">{{ overview.abnormalLogs || 0 }}</div>
									<div class="stat-label">异常操作</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" class="stat-card">
							<div class="stat-content">
								<div class="stat-icon info">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<circle cx="12" cy="12" r="10"></circle>
										<polyline points="12 6 12 12 16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="stat-info">
									<div class="stat-value">{{ overview.todayLogs || 0 }}</div>
									<div class="stat-label">今日日志</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>

			<!-- 搜索区域 -->
			<div class="search-bar">
				<el-form :inline="true" :model="searchForm">
					<el-form-item label="用户名">
						<el-input v-model="searchForm.username" placeholder="请输入用户名" clearable style="width: 180px">
							<template #prefix>
								<svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									<circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
								</svg>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="操作类型">
						<el-select v-model="searchForm.operationType" placeholder="请选择操作类型" clearable style="width: 150px">
							<el-option v-for="type in operationTypes" :key="type.value" :label="type.label" :value="type.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="操作状态">
						<el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
							<el-option label="成功" value="SUCCESS"></el-option>
							<el-option label="失败" value="FAILED"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="IP地址">
						<el-input v-model="searchForm.ip" placeholder="请输入IP地址" clearable style="width: 150px">
							<template #prefix>
								<svg class="input-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
									<polyline points="9 22 9 12 15 12 15 22"></polyline>
								</svg>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="时间范围">
						<el-date-picker
							v-model="searchForm.timeRange"
							type="datetimerange"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							style="width: 350px"
							format="YYYY-MM-DD HH:mm:ss"
							value-format="YYYY-MM-DD HH:mm:ss">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleSearch" :loading="loading">
							<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<circle cx="11" cy="11" r="8"></circle>
								<path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
							搜索
						</el-button>
						<el-button @click="handleReset">
							<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<polyline points="23 4 23 10 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
							重置
						</el-button>
					</el-form-item>
				</el-form>
			</div>

			<!-- 操作日志表格 -->
			<div class="table-container">
				<el-table
					:data="tableData"
					v-loading="loading"
					stripe
					style="width: 100%"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" align="center"></el-table-column>
					<el-table-column prop="id" label="日志ID" width="80" align="center"></el-table-column>
					<el-table-column prop="username" label="用户名" width="120" align="center"></el-table-column>
					<el-table-column prop="realName" label="真实姓名" width="120" align="center"></el-table-column>
					<el-table-column prop="operationType" label="操作类型" width="120" align="center">
						<template #default="scope">
							<el-tag :type="getOperationTypeTagType(scope.row.operationType)" size="small">
								{{ getOperationTypeLabel(scope.row.operationType) }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="operationDesc" label="操作描述" min-width="200" show-overflow-tooltip></el-table-column>
					<el-table-column prop="ip" label="IP地址" width="130" align="center"></el-table-column>
					<el-table-column prop="location" label="操作地点" width="150" align="center"></el-table-column>
					<el-table-column prop="status" label="状态" width="80" align="center">
						<template #default="scope">
							<el-tag :type="scope.row.status === 'SUCCESS' ? 'success' : 'danger'" size="small">
								{{ scope.row.status === 'SUCCESS' ? '成功' : '失败' }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="executionTime" label="执行耗时" width="100" align="center">
						<template #default="scope">
							{{ scope.row.executionTime ? scope.row.executionTime + 'ms' : '-' }}
						</template>
					</el-table-column>
					<el-table-column prop="createdAt" label="操作时间" width="180" align="center">
						<template #default="scope">
							{{ formatDateTime(scope.row.createdAt) }}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="150" align="center" fixed="right">
						<template #default="scope">
							<el-button-group>
								<el-button type="primary" @click="handleViewDetail(scope.row)">
									<svg class="action-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
									</svg>
									详情
								</el-button>
								<el-button type="danger" @click="handleDelete(scope.row)">
									<svg class="action-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
									删除
								</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</el-table>

				<!-- 分页控制 -->
				<div class="pagination-container">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pagination.currentPage"
						:page-sizes="[10, 20, 50, 100]"
						:page-size="pagination.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pagination.total">
					</el-pagination>
				</div>

				<!-- 批量操作 -->
				<div class="batch-operations" v-if="selectedLogs.length > 0">
					<span>已选择 {{ selectedLogs.length }} 项</span>
					<el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
					<el-button type="success" @click="handleBatchExport">批量导出</el-button>
				</div>
			</div>

			<!-- 操作日志详情对话框 -->
			<el-dialog
				title="操作日志详情"
				v-model="detailDialogVisible"
				width="800px">
				<operation-log-detail v-if="currentLog" :logData="currentLog"></operation-log-detail>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="detailDialogVisible = false">关闭</el-button>
					</div>
				</template>
			</el-dialog>

			<!-- 清理日志对话框 -->
			<el-dialog
				title="清理过期日志"
				v-model="cleanDialogVisible"
				width="400px">
				<el-form :model="cleanForm" :rules="cleanFormRules" ref="cleanFormRef" label-width="100px">
					<el-form-item label="保留天数" prop="days">
						<el-input-number
							v-model="cleanForm.days"
							:min="1"
							:max="365"
							:step="1"
							style="width: 100%">
						</el-input-number>
						<div class="form-tip">将删除{{ cleanForm.days }}天前的所有操作日志</div>
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="cleanDialogVisible = false">取消</el-button>
						<el-button type="danger" @click="handleConfirmClean" :loading="cleanLoading">确定清理</el-button>
					</div>
				</template>
			</el-dialog>
		</main>
	</div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
	getOperationLogPage,
	deleteOperationLog,
	batchDeleteOperationLogs,
	exportOperationLogs,
	cleanExpiredLogs,
	getOperationLogOverview
} from '@/api/operationLog'
import OperationLogDetail from '@/components/OperationLogDetail.vue'

export default {
	name: 'OperationLogIndex',
	components: {
		OperationLogDetail
	},
	setup() {
		// 响应式数据
		const currentUser = ref(null)
		const loading = ref(false)
		const cleanLoading = ref(false)
		const detailDialogVisible = ref(false)
		const cleanDialogVisible = ref(false)
		const currentLog = ref(null)
		const selectedLogs = ref([])
		const tableData = ref([])

		// 搜索表单
		const searchForm = reactive({
			username: '',
			operationType: '',
			status: '',
			ip: '',
			timeRange: null
		})

		// 操作类型选项
		const operationTypes = ref([
			{ label: '用户登录', value: 'LOGIN' },
			{ label: '用户登出', value: 'LOGOUT' },
			{ label: '新增', value: 'CREATE' },
			{ label: '修改', value: 'UPDATE' },
			{ label: '删除', value: 'DELETE' },
			{ label: '查询', value: 'QUERY' },
			{ label: '导入', value: 'IMPORT' },
			{ label: '导出', value: 'EXPORT' },
			{ label: '文件上传', value: 'UPLOAD' },
			{ label: '文件下载', value: 'DOWNLOAD' }
		])

		// 分页信息
		const pagination = reactive({
			currentPage: 1,
			pageSize: 10,
			total: 0
		})

		// 统计概览
		const overview = reactive({
			totalLogs: 0,
			todayUsers: 0,
			abnormalLogs: 0,
			todayLogs: 0
		})

		// 清理表单
		const cleanForm = reactive({
			days: 30
		})

		const cleanFormRef = ref(null)

		// 表单验证规则
		const cleanFormRules = {
			days: [
				{ required: true, message: '请输入保留天数', trigger: 'blur' },
				{ type: 'number', min: 1, max: 365, message: '保留天数必须在1-365之间', trigger: 'blur' }
			]
		}

		// 生命周期钩子
		onMounted(() => {
			// 获取当前用户信息
			currentUser.value = JSON.parse(localStorage.getItem('user')) || {}
			// 加载数据
			loadData()
			// 加载统计概览
			loadOverview()
		})

		// 加载数据
		const loadData = async () => {
			loading.value = true
			try {
				const params = {
					...searchForm,
					currentPage: pagination.currentPage,
					pageSize: pagination.pageSize
				}

				// 处理时间范围
				if (searchForm.timeRange && searchForm.timeRange.length === 2) {
					params.startTime = searchForm.timeRange[0]
					params.endTime = searchForm.timeRange[1]
				}
				delete params.timeRange

				const response = await getOperationLogPage(pagination.currentPage, pagination.pageSize, params)

				if (response.code === 200) {
					tableData.value = response.data.records
					pagination.total = response.data.total
				} else {
					ElMessage.error(response.message || '获取数据失败')
				}
			} catch (error) {
				console.error('获取操作日志数据失败:', error)
				ElMessage.error('获取数据失败')
			} finally {
				loading.value = false
			}
		}

		// 加载统计概览
		const loadOverview = async () => {
			try {
				const response = await getOperationLogOverview()
				if (response.code === 200) {
					Object.assign(overview, response.data)
				}
			} catch (error) {
				console.error('获取统计概览失败:', error)
			}
		}

		// 搜索
		const handleSearch = () => {
			pagination.currentPage = 1
			loadData()
		}

		// 重置搜索
		const handleReset = () => {
			Object.assign(searchForm, {
				username: '',
				operationType: '',
				status: '',
				ip: '',
				timeRange: null
			})
			handleSearch()
		}

		// 分页大小改变
		const handleSizeChange = (val) => {
			pagination.pageSize = val
			loadData()
		}

		// 当前页改变
		const handleCurrentChange = (val) => {
			pagination.currentPage = val
			loadData()
		}

		// 表格选择改变
		const handleSelectionChange = (selection) => {
			selectedLogs.value = selection
		}

		// 查看详情
		const handleViewDetail = async (row) => {
			currentLog.value = row
			detailDialogVisible.value = true
		}

		// 删除日志
		const handleDelete = (row) => {
			ElMessageBox.confirm('确定要删除该操作日志吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				try {
					const response = await deleteOperationLog(row.id)
					if (response.code === 200) {
						ElMessage.success('删除成功')
						loadData()
						loadOverview()
					} else {
						ElMessage.error(response.message || '删除失败')
					}
				} catch (error) {
					console.error('删除操作日志失败:', error)
					ElMessage.error('删除失败')
				}
			})
		}

		// 批量删除
		const handleBatchDelete = () => {
			ElMessageBox.confirm(`确定要删除选中的 ${selectedLogs.value.length} 条日志吗？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				try {
					const logIds = selectedLogs.value.map(log => log.id)
					const response = await batchDeleteOperationLogs(logIds)
					if (response.code === 200) {
						ElMessage.success('批量删除成功')
						loadData()
						loadOverview()
						selectedLogs.value = []
					} else {
						ElMessage.error(response.message || '批量删除失败')
					}
				} catch (error) {
					console.error('批量删除失败:', error)
					ElMessage.error('批量删除失败')
				}
			})
		}

		// 导出日志
		const handleExport = async () => {
			try {
				const params = { ...searchForm }
				if (searchForm.timeRange && searchForm.timeRange.length === 2) {
					params.startTime = searchForm.timeRange[0]
					params.endTime = searchForm.timeRange[1]
				}
				delete params.timeRange

				const response = await exportOperationLogs(params)

				// 创建下载链接
				const blob = new Blob([response], { type: 'application/vnd.ms-excel' })
				const url = window.URL.createObjectURL(blob)
				const link = document.createElement('a')
				link.href = url
				link.download = `操作日志_${new Date().toLocaleDateString('zh-CN')}.xlsx`
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
				window.URL.revokeObjectURL(url)

				ElMessage.success('导出成功')
			} catch (error) {
				console.error('导出失败:', error)
				ElMessage.error('导出失败')
			}
		}

		// 批量导出
		const handleBatchExport = async () => {
			try {
				const logIds = selectedLogs.value.map(log => log.id)
				const response = await exportOperationLogs({ logIds })

				// 创建下载链接
				const blob = new Blob([response], { type: 'application/vnd.ms-excel' })
				const url = window.URL.createObjectURL(blob)
				const link = document.createElement('a')
				link.href = url
				link.download = `操作日志_${new Date().toLocaleDateString('zh-CN')}.xlsx`
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
				window.URL.revokeObjectURL(url)

				ElMessage.success('批量导出成功')
			} catch (error) {
				console.error('批量导出失败:', error)
				ElMessage.error('批量导出失败')
			}
		}

		// 清理日志
		const handleCleanLogs = () => {
			cleanDialogVisible.value = true
		}

		// 确认清理
		const handleConfirmClean = () => {
			cleanFormRef.value.validate(async (valid) => {
				if (valid) {
					ElMessageBox.confirm(`确定要删除${cleanForm.days}天前的所有操作日志吗？此操作不可恢复！`, '警告', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(async () => {
						cleanLoading.value = true
						try {
							const response = await cleanExpiredLogs(cleanForm.days)
							if (response.code === 200) {
								ElMessage.success(`成功清理${response.data}条日志`)
								cleanDialogVisible.value = false
								loadData()
								loadOverview()
							} else {
								ElMessage.error(response.message || '清理失败')
							}
						} catch (error) {
							console.error('清理日志失败:', error)
							ElMessage.error('清理失败')
						} finally {
							cleanLoading.value = false
						}
					})
				}
			})
		}

		// 统计分析
		const handleStatistics = () => {
			// 使用Vue Router进行导航
			window.location.href = '/admin/operation-logs/statistics'
		}

		// 退出登录
		const handleLogout = () => {
			ElMessageBox.confirm('确定要退出登录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// 清除用户信息
				localStorage.removeItem('user')
				localStorage.removeItem('token')
				// 跳转到登录页
				window.location.href = '/login'
			})
		}

		// 获取操作类型标签类型
		const getOperationTypeTagType = (operationType) => {
			const typeMap = {
				'LOGIN': 'success',
				'LOGOUT': 'info',
				'CREATE': 'primary',
				'UPDATE': 'warning',
				'DELETE': 'danger',
				'QUERY': '',
				'IMPORT': 'success',
				'EXPORT': 'primary',
				'UPLOAD': 'warning',
				'DOWNLOAD': 'info'
			}
			return typeMap[operationType] || ''
		}

		// 获取操作类型标签
		const getOperationTypeLabel = (operationType) => {
			const type = operationTypes.value.find(t => t.value === operationType)
			return type ? type.label : operationType
		}

		// 格式化日期时间
		const formatDateTime = (dateTime) => {
			if (!dateTime) return '-'
			return new Date(dateTime).toLocaleString('zh-CN')
		}

		// 返回所有需要暴露的响应式数据和方法
		return {
			// 响应式数据
			currentUser,
			loading,
			cleanLoading,
			detailDialogVisible,
			cleanDialogVisible,
			currentLog,
			selectedLogs,
			tableData,
			searchForm,
			operationTypes,
			pagination,
			overview,
			cleanForm,
			cleanFormRef,
			cleanFormRules,

			// 方法
			loadData,
			handleSearch,
			handleReset,
			handleSizeChange,
			handleCurrentChange,
			handleSelectionChange,
			handleViewDetail,
			handleDelete,
			handleBatchDelete,
			handleExport,
			handleBatchExport,
			handleCleanLogs,
			handleConfirmClean,
			handleStatistics,
			handleLogout,
			getOperationTypeTagType,
			getOperationTypeLabel,
			formatDateTime
		}
	}
}
</script>

<style scoped>
/* 基础样式 */
* {
	font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
	background-color: #f5f7fa;
	color: #1a1a1a;
	margin: 0;
}

/* 容器布局 */
.app-container {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-template-rows: 64px 1fr;
	min-height: 100vh;
	background-color: #f5f7fa;
}

/* 顶部导航栏 */
.header {
	grid-column: 1 / -1;
	background: linear-gradient(135deg, #2C5AA0, #1E4D8B);
	display: flex;
	align-items: center;
	padding: 0 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo {
	font-size: 20px;
	font-weight: bold;
	color: white;
	display: flex;
	align-items: center;
	gap: 10px;
}

.flex-grow {
	flex-grow: 1;
}

.flex {
	display: flex;
}

.items-center {
	align-items: center;
}

.gap-6 {
	gap: 24px;
}

.gap-2 {
	gap: 8px;
}

/* 左侧导航栏 */
.sidebar {
	background-color: white;
	padding: 16px 0;
	border-right: 1px solid #e4e7ed;
	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.menu-item {
	padding: 14px 24px;
	color: #555;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
}

.menu-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 3px;
	background-color: #2C5AA0;
	transform: scaleY(0);
	transition: transform 0.3s ease;
}

.menu-item.active,
.menu-item:hover {
	background-color: #e8f4ff;
	color: #2C5AA0;
}

.menu-item.active::before,
.menu-item:hover::before {
	transform: scaleY(1);
}

/* 主内容区 */
.content {
	padding: 24px;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 24px;
	overflow-y: auto;
}

.main-content-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	margin: -24px -24px 24px -24px;
	background: white;
	border-bottom: 1px solid #e4e7ed;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.main-content-header h1 {
	color: #303133;
	font-size: 24px;
	font-weight: 600;
	margin: 0;
}

.header-actions {
	display: flex;
	gap: 12px;
}

/* 统计卡片 */
.statistics-cards {
	margin-bottom: 24px;
}

.stat-card {
	height: 120px;
	border: none;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-content {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 24px;
	gap: 20px;
}

.stat-icon {
	width: 70px;
	height: 70px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: white;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon.success {
	background: linear-gradient(135deg, #67C23A, #85CE61);
}

.stat-icon.primary {
	background: linear-gradient(135deg, #409EFF, #66B1FF);
}

.stat-icon.warning {
	background: linear-gradient(135deg, #E6A23C, #EEBE77);
}

.stat-icon.info {
	background: linear-gradient(135deg, #909399, #A6A9AD);
}

.stat-info {
	flex: 1;
}

.stat-value {
	font-size: 32px;
	font-weight: bold;
	color: #303133;
	line-height: 1;
	letter-spacing: -0.5px;
}

.stat-label {
	font-size: 14px;
	color: #909399;
	margin-top: 6px;
}

/* 搜索区域 */
.search-bar {
	background: white;
	padding: 24px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	border: 1px solid #e4e7ed;
	margin-bottom: 24px;
}

.search-bar :deep(.el-form-item) {
	margin-bottom: 16px;
}

.search-bar :deep(.el-form-item:last-child) {
	margin-bottom: 0;
}

/* 表格容器 */
.table-container {
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	border: 1px solid #e4e7ed;
	padding: 24px;
	overflow: hidden;
}

.table-container :deep(.el-table) {
	border-radius: 8px;
	overflow: hidden;
}

.table-container :deep(.el-table th) {
	background-color: #f8f9fa !important;
	color: #606266;
	font-weight: 600;
}

.table-container :deep(.el-table tbody tr:hover > td) {
	background-color: #f0f7ff !important;
}

/* 分页容器 */
.pagination-container {
	margin-top: 20px;
	text-align: right;
	padding-top: 16px;
	border-top: 1px solid #f0f0f0;
}

/* 批量操作 */
.batch-operations {
	margin-top: 16px;
	padding: 16px 20px;
	background: linear-gradient(135deg, #f0f7ff, #e8f4ff);
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
	border-left: 4px solid #409EFF;
}

.batch-operations span {
	font-weight: 500;
	color: #409EFF;
}

/* 头像和退出登录 */
#img-head {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
}

#img-head:hover {
	border-color: white;
	transform: scale(1.05);
}

.denglu {
	color: white;
	font-size: 15px;
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.denglu:hover {
	color: #ff6b6b;
	background-color: rgba(255, 255, 255, 0.1);
}

.text-sm {
	font-size: 14px;
}

.text-white {
	color: white;
}

/* 表单提示 */
.form-tip {
	font-size: 12px;
	color: #909399;
	margin-top: 6px;
	padding: 8px 12px;
	background-color: #f8f9fa;
	border-radius: 4px;
	border-left: 3px solid #E6A23C;
}

/* Element UI 样式调整 */
:deep(.el-card) {
	border: none;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

:deep(.el-button) {
	border-radius: 8px;
	font-weight: 500;
	transition: all 0.3s ease;
}

:deep(.el-button--primary) {
	background: linear-gradient(135deg, #409EFF, #66B1FF);
	border: none;
	box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

:deep(.el-button--primary:hover) {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
}

:deep(.el-button--success) {
	background: linear-gradient(135deg, #67C23A, #85CE61);
	border: none;
	box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

:deep(.el-button--warning) {
	background: linear-gradient(135deg, #E6A23C, #EEBE77);
	border: none;
	box-shadow: 0 4px 12px rgba(230, 162, 60, 0.3);
}

:deep(.el-button--danger) {
	background: linear-gradient(135deg, #F56C6C, #F78989);
	border: none;
	box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
}

:deep(.el-input__inner) {
	border-radius: 8px;
	border: 1px solid #dcdfe6;
	transition: all 0.3s ease;
}

:deep(.el-input__inner:focus) {
	border-color: #409EFF;
	box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

:deep(.el-select .el-input__inner) {
	border-radius: 8px;
}

:deep(.el-date-editor.el-input__inner) {
	border-radius: 8px;
}

:deep(.el-dialog) {
	border-radius: 12px;
	overflow: hidden;
}

:deep(.el-dialog__header) {
	background: linear-gradient(135deg, #409EFF, #66B1FF);
	color: white;
	padding: 20px 24px;
}

:deep(.el-dialog__title) {
	color: white;
	font-weight: 600;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
	color: white;
	font-size: 20px;
}

:deep(.el-dialog__body) {
	padding: 24px;
}

:deep(.el-dialog__footer) {
	padding: 16px 24px;
	background-color: #f8f9fa;
	border-top: 1px solid #e4e7ed;
}

:deep(.el-pagination) {
	padding: 16px 0;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
	border-radius: 8px;
}

:deep(.el-pager li) {
	border-radius: 8px;
	margin: 0 2px;
}

:deep(.el-pager li.active) {
	background: linear-gradient(135deg, #409EFF, #66B1FF);
	color: white;
}

:deep(.el-tag) {
	border-radius: 6px;
	font-weight: 500;
	padding: 4px 10px;
}

:deep(.el-table th) {
	background-color: #f8f9fa !important;
}

:deep(.el-table .el-table__row) {
	transition: all 0.3s ease;
}

/* 图标样式 */
.logo-icon {
	width: 28px;
	height: 28px;
	color: white;
}

.menu-icon {
	width: 20px;
	height: 20px;
	color: currentColor;
}

.logout-icon {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: middle;
}

.btn-icon {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: middle;
}

.action-icon {
	width: 14px;
	height: 14px;
	margin-right: 4px;
	vertical-align: middle;
}

.input-icon {
	width: 16px;
	height: 16px;
	color: #909399;
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.app-container {
		grid-template-columns: 200px 1fr;
	}

	.main-content-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.statistics-cards .el-col {
		margin-bottom: 16px;
	}
}

@media (max-width: 768px) {
	.app-container {
		grid-template-columns: 1fr;
	}

	.sidebar {
		display: none;
	}

	.header {
		padding: 0 16px;
	}

	.content {
		padding: 16px;
	}

	.search-bar .el-form {
		display: flex;
		flex-direction: column;
	}

	.search-bar .el-form-item {
		margin-right: 0;
		margin-bottom: 16px;
		width: 100%;
	}

	.header-actions {
		flex-wrap: wrap;
		gap: 8px;
	}

	.header-actions .el-button {
		margin: 0;
	}
}
</style>